<template>
  <el-button type="primary" @click="toggleSelection">按钮</el-button>
  <el-table ref="multipleTableRef" :data="tableData" @selection-change="handleSelectionChange" @row-click="handleRowClick" row-key="id">
    <el-table-column type="selection" :selectable="selectable" width="55" />
    <el-table-column prop="id" label="ID" width="80" />
    <el-table-column prop="name" label="姓名" />
    <el-table-column prop="age" label="年龄" width="100" />
  </el-table>
</template>

<script setup>
import { nextTick, ref } from 'vue'

let tableData = ref([
  { id: 1, name: '张三', age: 18 },
  { id: 2, name: '李四', age: 25 },
  { id: 3, name: '王五', age: 30 },
  { id: 4, name: '王五', age: 30 },
  { id: 5, name: '王小六', age: 30 },
  { id: 6, name: '张小七', age: 30 },
  { id: 7, name: '李小八', age: 30 }
])
const multipleTableRef = ref(null)
const multipleSelection = ref([])

// 点击行事件
const handleRowClick = row => {
  multipleTableRef.value.clearSelection()
  multipleTableRef.value.toggleRowSelection(row, undefined, false)
  console.log('测试数据打印', row)
}
const handleSelectionChange = val => {
  multipleSelection.value = val
}
</script>

<style>
.row-selected {
  background-color: #f0f9eb !important;
}
</style>
